<template>
	<view class="">
		<Header title="AI错题解析-导航" :isHome="true" :isWhite='true'></Header>
		<view class="main">
			<view class="" v-for="(item,index) in list" :key="index" >
				<view class="title">
					<view class="border">

					</view>
					<view class="">
						{{item.name}}
					</view>
				</view>
				<view class="content">
					<view class="contentFlex" v-for="(itm,inx) in item.al_lists" :key="inx" @click="goPage('/subpages/banner/chatai?id='+itm.id)">
						<view class="">
							<view class="detailTitle">
								{{itm.title}}
							</view>
							<view class="detailContent">
								{{itm.description}}
							</view>
						</view>
						<view>
							<image :src="img_url + itm.cover_img" mode="" class="img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url
	} from '../../utils/request';
	export default {
		data() {
			return {
				img_url: img_url,
				list: [{
						title: '语文',
						detailList: [{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book1.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book2.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book3.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book4.png'
							}
						]
					},
					{
						title: '数学',
						detailList: [{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book1.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book2.png'
							}
						]
					},
					{
						title: '英语',
						detailList: [{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book1.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book2.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book3.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book4.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book3.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book4.png'
							},
							{
								detailTitle: '赏析古诗文',
								detailContent: '古诗古文秒懂',
								img: '/static/book4.png'
							}
						]
					},
					{
						title: '综合',
						detailList: [{
							detailTitle: '赏析古诗文',
							detailContent: '古诗古文秒懂',
							img: '/static/book1.png'
						}]
					},
				]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(e) {
				get('/ai/aiLists').then((res) => {
					if (res.code == 1) {
						this.list = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败'
						})
					}
				});
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 32rpx 40rpx;

		.title {
			display: flex;
			align-items: center;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;

			.border {
				width: 8rpx;
				height: 32rpx;
				background: #FFD275;
				border-radius: 4rpx;
				margin-right: 12rpx;
			}
		}

		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.contentFlex {
				width: 327rpx;
				height: 136rpx;
				box-sizing: border-box;
				padding: 28rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				font-family: PingFangSC-Regular;
				display: flex;
				margin: 20rpx 0;

				.detailTitle {
					font-family: PingFangSC-SNaNrpxibold;
					font-weight: 600;
					font-size: 28rpx;
					color: #222222;
				}

				.detailContent {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}

				.img {
					width: 80rpx;
					height: 80rpx;
					margin-left: 20rpx;
				}
			}
		}

	}
</style>